<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法之指令语法</title>
    <!-- 安装 Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        指令语法：
        1. 什么是指令？有什么作用？
        》 指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用域 DOM
        2. Vue 框架中的所有指令的名字都以 'v-'开始
        3. 插值是写在标签体当中的，那么指令写在哪里呢
            > Vue 框架中所有的指令都是以 HTML标签的属性形式存在的，例如：
             <span 指令是写在这里的></span>
             注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。
             是需要先让 Vue 框架进行编译的，编译之后的内容浏览器是可以看懂的
        4.指令的语法规则：
            指令的一个完整的语法格式:
             <html标签 标签 v-指令名:参数></html标签>
             <html标签> v-指令名:参数="表达式"</html标签> 
              <html标签> v-指令名:参数="javascript表达式"</html标签> 
             表达式:
                之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么，实际上是一样的
                但是需要注意的是：在指令中的表达式位置不能外层再添加一个{{}},不然报错
            注意：不是所有的指令的都有参数和表达式
                有的指令，不需要参数，也不需要表达式，例如：v-once
                有的指令，不需要参数，但是需要表达式，例如：v-if="表达式"
                有的指令，既需要参数，又需要表达式，例如：v-bind:参数="表达式"

     -->

     <!-- 准备一个容器 -->
     <div id="app">
        <h1>{{msg}}</h1>
       <h1 v-once>{{msg}}</h1>
       <h1 v-if="a > b">{{msg}}</h1>
     </div>
    <!-- Vue程序 -->
    <script>
        new Vue({
            el : '#app',
            data : {
                msg : 'hello vue',
                a : 0,
                b : 9
            }
        })
    </script>
</body>
</html>